import Taro from '@tarojs/taro'
import { action, observable } from 'mobx'

export class CustomTabBar {
  @observable custom = true
  @observable selectedIndex = 0
  @observable visible = true
  @observable redDot = {}
  @observable processing = false

  @action setSelectedIndex = (index: number) => {
    this.selectedIndex = index
  }

  @action showTabBar = () => {
    if (this.custom) {
      console.info('显示自定义tabBar')
      this.visible = true
    } else {
      console.info('显示原生tabBar')
      Taro.showTabBar()
    }
  }

  @action hideTabBar = () => {
    if (this.custom) {
      console.info('隐藏自定义tabBar')
      this.visible = false
    } else {
      console.info('显示隐藏tabBar')
      Taro.hideTabBar()
    }
  }

  @action showTabBarRedDot = (index: number) => {
    console.info('showTabBarRedDot', index)
    if (index < 0) return
    if (this.custom) {
      const { redDot } = this
      redDot[index] = true
      this.redDot = { ...redDot }
    } else {
      Taro.showTabBarRedDot({ index })
    }
  }

  @action hideTabBarRedDot = (index: number) => {
    console.info('hideTabBarRedDot', index)
    if (this.custom && this.redDot[index] !== undefined) {
      this.redDot[index] = false
    } else {
      Taro.hideTabBarRedDot({ index })
    }
  }

  @action setProcessing = (processing: boolean) => {
    this.processing = processing
  }
}
export default new CustomTabBar()
